<script lang="ts" setup>
import Header from '@/components/header.vue'
import EarthComponent from "@/components/EarthComponent.vue";
import DrawPanel from './component/DrawPanel.vue'
import DetailRecord from './component/DetailRecord.vue'
import OperatePanel from './component/OperatePanel.vue'
import EditGraphical from './component/EditGraphical.vue'
import {HomeFilled} from '@element-plus/icons-vue'

import { useRouter } from 'vue-router';
let router = useRouter()

// 返回主界面
const toHome = ()=>{
    router.push('/')
}
</script>
<template>
  <div class="EditorPage">
    <div class="Editor_header">
      <Header>
        <template #HeadBtnIcon>
            <el-icon class="toHome" @click="toHome"><HomeFilled /></el-icon>
        </template>
      </Header>
    </div>
    <DrawPanel></DrawPanel>
    <DetailRecord></DetailRecord>
    <OperatePanel></OperatePanel>
    <EditGraphical></EditGraphical>
    <div class="Editor_Container">
      <EarthComponent></EarthComponent>
    </div>
  </div>
</template>
<style scoped>
.Editor_header {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #3b86ff61;
  z-index: 100;
}
.Editor_Container{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.toHome{
    cursor: pointer;
    margin: 0 7px;
    font-size: 18px;
}
</style>
